<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://unpkg.com/vue@2.7.14/dist/vue.min.js"></script>

    <style>
        .page>span{
            margin: 3px;
            padding: 5px;
            background-color: #eee;
            border-radius: 3px;
            min-width: 1.5em;
            display: inline-block;
            text-align: center;
            cursor: pointer;
        }
    </style>
</head>
<body>
<div id="app">
<!--    分页组件, 扩展: 页面数量太多, 如何处理? -->
    <page size="10" total="157"></page>
</div>
<script>
    Vue.component("page",{
        props:["size", "total"],
        template:`
        <div class="page" style="display: flex; flex-wrap: wrap">
            <span>首页</span>
            <span>上一页</span>
            <span v-for="p in allPages"
                :style="{backgroundColor: p==curPage?'#ddd':'#eee'}"
                @click="curPage = p">{{p}}</span>
            <span>下一页</span>
            <span>尾页</span>
        </div>
        `,
        data(){ return {
            allPages:0,  // 总页数
            curPage:1,  // 当前页
        }},
        created(){
            this.allPages = parseInt(this.total / this.size);
            this.allPages += this.total % this.size == 0 ? 0 : 1;
        }
    })
    var v = new Vue({
        el:"#app",
    })
</script>

</body>
</html>